<template>
    <div class="statistics">
        <Header></Header>
        <div class="content">
            <div class="head">
                <el-row>
                    <el-col :span="12"
                            class="head-content left"
                            :style="`height: ${headH}vh`">
                        <!--区域-->
                        <div class="area cf">
                            <span class="title fl">区域: </span>
                            <ul class="opt-line fl"
                                v-if="areaIsMulti"
                                :style="`height: ${areaMultiH}vh; overflow: ${areaOverflow}`">
                                <li class="active" @click="filterAsset">所有</li>
                                <li v-for="area in areaData" :key="area.areaId">{{ area.areaName }}</li>
                            </ul>
                            <ul class="opt-line fl"
                                v-else
                                :style="`height: ${areaMultiH}vh; overflow: ${areaOverflow}`">
                                <li v-for="area in areaData" :key="area.areaId">
                                    <el-checkbox>
                                        {{ area.areaName }}
                                    </el-checkbox>
                                </li>
                            </ul>
                            <div class="fr multi-choose">
                                <span class="more" v-if="areaOverflow === 'hidden'"
                                      @click="areaMoreHandle('open')">
                                    更多
                                    <i class="el-icon-arrow-down"></i>
                                </span>
                                <span class="more" v-else @click="areaMoreHandle('close')">
                                    收起
                                    <i class="el-icon-arrow-down"></i>
                                </span>
                                <el-button size="mini"
                                           v-if="areaIsMulti"
                                           @click="areaMultiHandle">
                                    <i class="el-icon-plus"></i>多选
                                </el-button>
                                <p v-if="!areaIsMulti" style="padding-top: 0.3rem">
                                    <el-button size="mini" type="primary">确定</el-button>
                                    <el-button size="mini" @click="areaMoreHandle('close')">取消</el-button>
                                </p>
                            </div>
                        </div>
                        <!--报警开关-->
                        <div class="cf">
                            <span class="title fl">报警开关: </span>
                            <ul class="opt-line">
                                <li class="active">所有</li>
                                <li>开</li>
                                <li>关</li>
                            </ul>
                        </div>
                        <!--责任人-->
                        <div class="cf">
                            <span class="title fl">责任人: </span>
                            <ul class="opt-line fl"
                                v-if="personIsMulti"
                                :style="`height: ${personMultiH}vh; overflow: ${personOverflow}`">
                                <li class="active">所有</li>
                                <li>持国天王</li>
                                <li>广目天王</li>
                                <li>多闻天王</li>
                                <li>增长天王</li>
                                <li>增长天王</li>
                                <li>增长天王</li>
                                <li>增长天王</li>
                                <li>增长天王</li>
                                <li>增长天王</li>
                                <li>增长天王</li>
                                <li>增长天王</li>
                                <li>增长天王</li>
                                <li>增长天王</li>
                            </ul>
                            <ul class="opt-line fl"
                                v-else
                                :style="`height: ${personMultiH}vh; overflow: ${personOverflow}`">
                                <li>
                                    <el-checkbox>持国天王</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>广目天王</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>多闻天王</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>增长天王</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>增长天王</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>增长天王</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>增长天王</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>增长天王</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>增长天王</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>增长天王</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>增长天王</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>增长天王</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>增长天王</el-checkbox>
                                </li>
                            </ul>
                            <div class="fr multi-choose">
                                  <span class="more" v-if="personOverflow === 'hidden'"
                                        @click="personMoreHandle('open')">
                                    更多
                                    <i class="el-icon-arrow-down"></i>
                                </span>
                                <span class="more" v-else @click="personMoreHandle('close')">
                                    收起
                                    <i class="el-icon-arrow-down"></i>
                                </span>
                                <el-button size="mini"
                                           v-if="personIsMulti"
                                           @click="personMultiHandle">
                                    <i class="el-icon-plus"></i>多选
                                </el-button>
                                <p v-if="!personIsMulti" style="padding-top: 0.3rem">
                                    <el-button size="mini" type="primary">确定</el-button>
                                    <el-button size="mini" @click="personMoreHandle('close')">取消</el-button>
                                </p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12"
                            class="head-content right"
                            :style="`height: ${headH}vh`">
                        <div class="cf">
                            <span class="title fl">修改日期: </span>
                            <ul class="opt-line opt-line-datepicker">
                                <li class="active">所有</li>
                                <li>
                                    <el-date-picker
                                        size="mini"
                                        v-model="dateVal"
                                        type="daterange"
                                        @change="dateChange"
                                        value-format="yyyy-MM-dd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                    </el-date-picker>
                                </li>
                            </ul>
                        </div>
                        <div class="cf">
                            <span class="title fl">报警记录: </span>
                            <ul class="opt-line fl" v-if="warnIsMulti">
                                <li class="active">所有</li>
                                <li>无</li>
                                <li>转移</li>
                                <li>丢失</li>
                            </ul>
                            <ul class="opt-line fl opt-line-multi" v-else>
                                <li>
                                    <el-checkbox>无</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>转移</el-checkbox>
                                </li>
                                <li>
                                    <el-checkbox>丢失</el-checkbox>
                                </li>
                            </ul>
                            <div class="fr multi-choose">
                                <el-button size="mini"
                                           @click="warnMultiHandle('open')"
                                           v-if="warnIsMulti">
                                    <i class="el-icon-plus"></i>多选
                                </el-button>
                                <span v-if="!warnIsMulti">
                                    <el-button size="mini" type="primary">确定</el-button>
                                    <el-button size="mini" @click="warnMultiHandle('close')">取消</el-button>
                                </span>
                            </div>
                        </div>
                        <div class="cf">
                            <span class="title fl">是否绑定电子标签: </span>
                            <ul class="opt-line">
                                <li class="active">所有</li>
                                <li>已绑定</li>
                                <li>未绑定</li>
                            </ul>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="body"
                 :style="`height: ${bodyH}vh`">
                <p class="body-title">
                    已查到
                    <span class="red">“一楼茶水间” + “李二狗” 20台</span>
                    固定资产信息
                    <button type="button" class="export-btn fr">导出</button>
                </p>
                <el-table
                    :data="assetData"
                    :max-height="tableH"
                    style="width: 100%">
                    <el-table-column
                        prop="name"
                        class-name="red"
                        label="固定资产名称">
                    </el-table-column>
                    <el-table-column
                        prop="id"
                        class-name="orange"
                        label="固定资产编号">
                    </el-table-column>
                    <el-table-column
                        prop="tagId"
                        label="绑定电子标签">
                    </el-table-column>
                    <el-table-column
                        prop="area"
                        sortable
                        label="所在区域">
                    </el-table-column>
                    <el-table-column
                        prop="warnSwitch"
                        label="报警开关">
                        <template slot-scope="scope">
                            <el-switch
                                @change="alarmSwitch(scope.row)"
                                v-model="scope.row.alarmSwitch"
                                active-color="#0CB5F6"
                                inactive-color="#999999">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="personLiable"
                        sortable
                        label="责任人">
                    </el-table-column>
                    <el-table-column
                        prop="remark"
                        label="备注">
                    </el-table-column>
                    <el-table-column
                        prop="updateTime"
                        sortable
                        label="修改日期">
                    </el-table-column>
                    <el-table-column
                        prop="record"
                        label="报警记录">
                    </el-table-column>
                    <el-table-column
                        prop="recordTime"
                        sortable
                        label="报警时间">
                    </el-table-column>
                </el-table>
                <!--分页组件-->
                <el-pagination
                    background
                    @current-change="currentChange"
                    layout="prev, pager, next"
                    :page-size="pagSize"
                    :total="pagTotal">
                </el-pagination>
                <p class="pagination">
                    每页显示
                    <select @change="pageSizeChange" v-model="pageSize">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    条
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '@/components/header'

    export default {
        name: "statistics",
        components: {
            Header
        },
        data() {
            return {
                headH: 22, // 头部的高，单位vh
                bodyH: 68, // body的高，单位vh
                areaMultiH: 5, // 区域多选行的高低，单位vh
                personMultiH: 5, // 责任人多选行的高低，单位vh
                areaOverflow: 'hidden', // 区域行的溢出方式
                personOverflow: 'hidden', // 责任人行的溢出方式
                areaIsMulti: true, // 为true的时候，不显示复选框（区域）
                personIsMulti: true, // 为true的时候，不显示复选框（责任人）
                dateVal: '', // 时间选择器的值
                warnIsMulti: true, // 为true的时候，不显示复选框（报警记录）
                assetData: [],
                areaData: [],
                tableH: '400', // 表格的高度
                tableChangeH: '0',
                winH: 0, // 保存当前窗口高度
                pagTotal: 1,// 初始化总的数据数
                pageSize: 10, // 每页显示的值
                pagSize: 10, // 传入分页组件每页显示的值
            }
        },
        methods: {
            /**
             * 区域更多或收起
             * @param flag
             */
            areaMoreHandle(flag) {
                if (flag === 'open') {
                    this.personMoreHandle('close')
                    this.warnMultiHandle('close')
                    this.areaMultiH += 10
                    this.headH += 10
                    this.bodyH -= 10
                    this.tableH -= this.winH * 0.1
                    this.areaOverflow = 'auto'
                } else {
                    this.areaMultiH = 5
                    this.headH = 22
                    this.bodyH = 68
                    this.tableH = this.tableChangeH
                    this.areaOverflow = 'hidden'
                    this.areaIsMulti = true
                }
            },
            /**
             * 区域多选
             */
            areaMultiHandle() {
                this.personMoreHandle('close')
                this.warnMultiHandle('close')
                this.areaIsMulti = false
                this.areaMultiH = 15
                this.headH = 32
                this.bodyH = 58
                this.tableH -= this.winH * 0.1
                this.areaOverflow = 'auto'
            },
            /**
             * 责任人更多或收起
             * @param flag
             */
            personMoreHandle(flag) {
                if (flag === 'open') {
                    this.areaMoreHandle('close')
                    this.warnMultiHandle('close')
                    this.personMultiH += 10
                    this.headH += 10
                    this.bodyH -= 10
                    this.tableH -= this.winH * 0.1
                    this.personOverflow = 'auto'
                } else {
                    this.personMultiH = 5
                    this.headH = 22
                    this.bodyH = 68
                    this.tableH = this.tableChangeH
                    this.personOverflow = 'hidden'
                    this.personIsMulti = true
                }
            },
            /**
             * 区域多选
             */
            personMultiHandle() {
                this.areaMoreHandle('close')
                this.warnMultiHandle('close')
                this.personIsMulti = false
                this.personMultiH = 15
                this.headH = 32
                this.bodyH = 58
                this.tableH -= this.winH * 0.1
                this.personOverflow = 'auto'
            },
            warnMultiHandle(flag) {
                this.warnIsMulti = flag !== 'open'
                if (flag === 'open') {
                    this.areaMoreHandle('close')
                    this.personMoreHandle('close')
                }
            },
            /**
             * 时间选择器改变触发
             * @param val
             */
            dateChange(val) {
                console.log(val)
            },
            /**
             * 报警开关
             * @param row
             */
            alarmSwitch(row) {
                let params = {
                    assetsId: row.id,
                    userId: "",
                    alarmSwitch: row.alarmSwitch
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .assets
                    .alarmSwitch(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$message.success(this.$msgDictionary.operation.suc)
                        } else {
                            this.$message.error(result.msg)
                            row.alarmSwitch = !params.alarmSwitch
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            /**
             * 每页显示切换
             */
            pageSizeChange() {
                this.pagSize = this.pageSize * 1
                this.getIndex(this.pageSize * 1, 1)
            },
            currentChange(index) {
                this.getIndex(this.pageSize * 1, index)
            },
            getIndex(pageSize, pageNum) {
                let params = {
                    userId: "",
                    pageSize: pageSize ? pageSize * 1 : 10,
                    pageIndex: pageNum ? pageNum * 1 : 1
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .assets
                    .getAssets(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            if (result.result) {
                                this.assetData = result.result.assetsInfoPage.content
                                this.pagTotal = result.result.totalAssetNum
                                this.pagSize = params.pageSize * 1
                            }
                        } else if (result.code === 408) {
                            this.$message.error(this.$msgDictionary.loginTimeout)
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                this.$router.push({path: '/login'})
                            }, 1500)
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            getArea() {
                let params = {
                    userId: "",
                    pageSize: 30,
                    pageIndex: 1
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .areas
                    .getAreas(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            if (result.result) {
                                this.areaData = result.result.areasInfoDTOS.content
                            }
                        } else if (result.code === 408) {
                            this.$message.error(this.$msgDictionary.loginTimeout)
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                this.$router.push({path: '/login'})
                            }, 1500)
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            /**
             * 获取责任人
             */
            getPersonLiable() {
                let params = {
                    userId: "",
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$message.success(this.$msgDictionary.serviceException)
            },
            /**
             * 筛选函数
             * @param param
             */
            filterAsset(param) {
                console.log(param)
            }
        },
        mounted() {
            this.winH = window.screen.height
            this.tableH = this.winH * 0.4
            this.tableChangeH = this.tableH
            this.getIndex()
            this.getArea()
            this.getPersonLiable()
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../assets/css/color";

    .content {
        box-sizing: border-box;
        height: 90vh;
        .head {
            .head-content {
                padding: 0.3rem 0.5rem;
                font-size: 0.16rem;
                .title {
                    display: inline-block;
                    width: 0.8rem;
                    color: $ph_color;
                    padding-top: 0.15rem;
                }
                .opt-line {
                    white-space: nowrap;
                    width: 6.2rem;
                    height: 0.5rem;
                    li {
                        float: left;
                        padding: 0.1rem 0.15rem;
                        cursor: pointer;
                        line-height: 0.28rem;
                        &.active {
                            color: $strong_red;
                        }
                        span {
                            font-size: 0.16rem;
                        }
                    }
                }
                .multi-choose {
                    padding-top: 0.1rem;
                    .more {
                        cursor: pointer;
                        padding-left: 0.05rem;
                    }
                }
                &.left {
                    border-right: 0.03rem solid $segment;
                }
                &.right {
                    .title {
                        width: 1.5rem;
                    }
                    .opt-line-multi {
                        width: 5rem;
                    }
                    .opt-line-datepicker {
                        width: 100%;
                    }
                }
            }
        }
        .body {
            box-shadow: 0 2px 20px 0 $segment inset;
            .body-title {
                padding: 0.15rem 0.4rem;
                font-size: 0.16rem;
                height: 0.5rem;
                line-height: 0.5rem;
                .red {
                    color: $strong_red;
                }
                .export-btn {
                    border: 1px solid $strong_red;
                    color: $strong_red;
                    width: 1.6rem;
                    height: 0.5rem;
                    border-radius: 0.25rem;
                    background: transparent;
                    font-size: 0.16rem;
                    outline: none;
                    cursor: pointer;
                }
            }
            .pagination {
                position: fixed;
                bottom: 0.5rem;
                left: 1rem;
            }
        }
    }
</style>
